<!--
 * @Author: wangshuguang
 * @Date: 2022-03-11 10:46:34
 * @LastEditTime: 2022-03-31 13:20:01
 * @LastEditors: wangshuguang
 * @Description: 会员开卡记录
-->
<template>
  <div class="memberCreCardList">
    <HeaderComp title="会员开卡记录" />
    <!-- 导航栏 -->
    <van-tabs v-model="dateType" @change="tabChange" title-active-color='#FFB72F' color='#FFB72F'>
      <van-tab :title="menu.label" :name="menu.value" v-for="menu of menuTab" :key="menu.value"></van-tab>
    </van-tabs>
    <!-- 数据台 -->
    <div class="dataCard">
      <div class="card">
        <div class="cardItem">
			<div class="num">{{totalData.allTotal}}</div>
          <div class="label">累计开卡金额（元）</div>
          
        </div>
        <div class="cardItem">
			 <div class="num">{{totalData.totalAmount}}</div>
          <div class="label">{{ dateTypeText }}开卡金额（元）</div>
         
        </div>
        <div class="cardItem">
			 <div class="num">{{totalData.totalCount}}</div>
          <div class="label">{{ dateTypeText }}开卡人数（人）</div>
         
        </div>
      </div>
	  <div class="cardS" style="margin-top:10px;" v-if="memCardArr.length <= 3">
	    <div class="cardItem" v-for="memCard of memCardArr" :key="memCard.key">
	      <div class="num">{{memCard.totalCount}}</div>
	      <div class="label">{{ memCard.cardName }}</div>
	    </div>
	  </div>
      <div class="card memCard" v-if="memCardArr.length > 3">
        <div class="cardItem" v-for="memCard of memCardArr" :key="memCard.key">
          <div class="num">{{memCard.totalCount}}</div>
          <div class="label">{{ memCard.cardName }}</div>
        </div>
      </div>
      <!-- <div class="dataTime">统计数据截止{{ dateFtt('yyyy-MM-dd hh:mm', new Date()) }}</div> -->
    </div>
    <!-- 列表展示 -->
    <div class="dataList" >
      <div class="head">
        <div class="title">会员开卡记录</div>
        <div class="listMenu">
          <img @click="changeListType('list')" :src="nowListActive == 'list' ? imgIcon['listActive']: imgIcon['list']" alt="">
          <img @click="changeListType('line')" :src="nowListActive == 'line' ? imgIcon['lineActive']: imgIcon['line']" alt="">
        </div>
      </div>
      <van-list
        class="bottomContent listContent" 
        v-model="loading"
        offset="100"
        :finished="finished"
        finished-text="没有更多了"
        @load="getListData">
        <!-- 数据列表 -->
        <div class="listContent" v-if="nowListActive == 'list'">
          <div @click="toDetail(item)" v-for="item of dataList" :key="item.num" class="listItem">
            <div>
              <div class="name">
				  <span>{{item.listName}}</span>
				  <span v-if="item.infoType==='5'" style="color: #B9B8B8;">({{item.remark}})</span>
			  
			  </div>
              <div class="date">{{item.listTime}}</div>
            </div>
            <div class="num">+{{item.openAmount}}</div>
          </div>
        </div>
        <!-- 图标内容 -->
        <div class="chartContent" v-else>
          <memberCreCardChrars :baseData="lineData"/>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>

import { 
  queryVipOpenCardPage, 
  queryVipCardLineChart,
  queryVipCardTypeNum,
  queryVipTotalOpenAmount,
  queryVipTotalAmountNum,
} from "@/api/flow/index";
import { dateFtt } from "@/utils/utils";
import memberCreCardChrars from "../components/memberCreCardChrars.vue";
import { mapGetters } from "vuex";
export default {
  components:{memberCreCardChrars},
  data(){
    return {
      lineData: [],
      memCardArr:[
        { key:"1", title: '普卡' },
        { key:"2", title: '银卡' },
        { key:"3", title: '金卡' },
        { key:"4", title: '铂金卡' },
        { key:"5", title: '专属卡' },
        { key:"6", title: '砖石卡' },
      ],
	  simulation:[
		  { key:"1", title: '普卡拉拉' },
		  { key:"2", title: '银卡' },
		  { key:"3", title: '金卡' },
	  ],
      dateFtt,
      nowListActive: 'list',
      dateType: '',
      dateTypeText: '今天',
      imgIcon:{
        line:require('../../../assets/img/flow/line.png'),
        lineActive:require('../../../assets/img/flow/line_active.png'),
        list:require('../../../assets/img/flow/list.png'),
        listActive:require('../../../assets/img/flow/list_active.png'),
      },
      totalData:{
        num: 1001,
		allTotal:0,
		totalAmount:0,
		totalCount:0
		
      },
      loading: false,
      finished: false,
      nowMenu:{},
      menuTab:[
        { label: '今天', value: '' },
        { label: '昨天', value: 'yesterday' },
        { label: '近七天', value: 'week' },
        { label: '近30天', value: 'thirty' },
        { label: '本月', value: 'month' },
      ],
      dataList: [],
      pageObj:{
        pageSize: 10,
        pageNum: 1
      },
    }
  },
  computed:{
    queryData(){
      return this.$route.query
    },
    ...mapGetters(['flowQueryData'])
  },
  mounted(){
      this.getBaseData() 
      this.getListData()
  },
  methods:{
    tabChange(value, title){
      this.dateType = value
      this.dateTypeText = title
      // 初始化列表数据
      this.dataList = []
      this.pageObj.pageNum = 1
      this.finished = false
      this.getBaseData()
      this.getListData()
    },
    toDetail(item){
      this.$router.push({
        path:'/memberCreCardListDetail',
        query:{...item}
      })
    },
    changeListType(key){
      if(this.nowListActive != key){
        this.nowListActive = key
      }
    },
    changeMenu(item){
      this.nowMenu = item
    },
    getBaseData(){
		
      const { merchantId } = this.flowQueryData
      let obj = {
        pageNum: this.pageObj.pageNum,
        pageSize: this.pageObj.pageSize,
        dateType: this.dateType,
        merchantId,
      }
      this.loading = true
	  queryVipTotalOpenAmount(obj).then(res => {
	  		  console.log('累计开卡金额',res)
	    this.totalData.allTotal = res.data.data
	  })
      queryVipTotalAmountNum(obj).then(res => {
		  console.log('今天开卡金额',res)
        this.totalData = {
          ...this.totalData,
          ...res.data.data
        }
      })
      
      queryVipCardTypeNum(obj).then(res => {
		  console.log('卡种+++++++++++',res)
        this.memCardArr = res.data.data
      })
      // 查询开卡记录 折线图
      queryVipCardLineChart(obj).then(res => {
		  console.log('折线图++++++++++++',res)
        this.lineData = res.data.data
        
      })
    },
    getListData(){
      const { merchantId } = this.flowQueryData
      let obj = {
        pageNum: this.pageObj.pageNum,
        pageSize: this.pageObj.pageSize,
        dateType: this.dateType,
        merchantId,
      }
      this.loading = true
      // 查询开卡记录
      queryVipOpenCardPage(obj).then(res => {
		  console.log('查询开卡记录',res)
        const { list, total } = res.data.data
        this.dataList.push(...list)
        this.pageObj.pageNum += 1
        this.loading = false
        if(this.dataList.length == total){
          this.finished = true
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.memberCreCardList{
  background: #F9F9F9;
  display: flex;
  flex-direction: column;
  height: 100%;
  .dataCard{
    padding: 30px;
    .dataTime{
      font-size: 28px;
      font-weight: 500;
      color: #131313;
      opacity: 0.6;
      margin-top: 29px;
    }
    .card{
      background: #FFFFFF;
      border: 1px solid #F8F3E8;
      box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.1);
      border-radius: 15px;
      display: flex;
      justify-content: space-evenly;
      padding: 50px 0;
      &.memCard{
        overflow: auto;
        margin-top: 30px;
        justify-content: space-between;
        .cardItem{
          margin: 0 20px;
		  white-space: nowrap;
		  display: inline-block;
        }
      }
      .cardItem{
        text-align: center;
		
        .num{
          font-size: 38px;
          font-weight: 500;
          color: #131313;
		  margin-top: 10px;
        }
        .label{
          font-size: 26px;
          font-weight: 500;
          color: #131313;
          opacity: 0.6;
		  
        }
      }
    }
	.cardS{
	  background: #FFFFFF;
	  border: 1px solid #F8F3E8;
	  box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.1);
	  border-radius: 15px;
	  display: flex;
	  justify-content: space-between;
	  padding: 50px 0px;
	  &.memCard{
	    overflow: auto;
	    margin-top: 30px;
	    justify-content: space-between;
	    .cardItem{
		  width: 30%;
	      margin: 0 20px;
		  white-space: nowrap;
		  display: inline-block;
	    }
	  }
	  .cardItem{
	    text-align: center;
		width: 33%;
	    .num{
	      font-size: 38px;
	      font-weight: 500;
	      color: #131313;
		  margin-top: 10px;
	    }
	    .label{
	      font-size: 26px;
	      font-weight: 500;
	      color: #131313;
	      opacity: 0.6;
		  
	    }
	  }
	}
  }
  .dataList{
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: #fff;
    .head{
      display: flex;
      justify-content: space-between;
      .title{
        font-size: 32px;
        font-weight: bold;
        color: #131313;
      }
      .listMenu{
        img{
          margin-left: 30px;
          width: 50px;
        }
      }
    }
    .listContent{
      flex: 1;
      overflow: auto;
      .listItem{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0;
        border-bottom: 1px solid #E7E7E7;
        .name{
          font-size: 32px;
          font-weight: 500;
          color: #131313;
        }
        .date{
          font-size: 28px;
          font-weight: 400;
          color: #3D3D3D;
          opacity: 0.8;
          margin-top: 30px;
        }
        .num{
          font-size: 34px;
          font-weight: 500;
          color: #131313;
        }
      }
    }
    .chartContent{
    }
  }
}
</style>
